<template>
  <div class="main">
    <div class="title">{{title}}</div>
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="main-container">
      <scroll-container ref="scrollContainer">
        <div class="container-list">
          <multi-list @scrollTo="scrollTo" :groupDatas="groupDatas">
            <imglist_w384
              :groupData="groupDatas.dataArr[0]"
              :focArr="groupDatas.focArr[0]"
              :group="groups[0]"
            ></imglist_w384>
          </multi-list>
        </div>
      </scroll-container>
    </div>
  </div>
</template>

<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import Navigation from "@/components/Navigation";
import imglist_w384 from "../ImgList_w384";

export default {
  name: "xgkk",
  components: {
    Navigation,
    scrollContainer,
    multiList,
    imglist_w384
  },
  data() {
    return {
      groups: [0],
      scrollY: 0,
      backObjName: "wkt_dt",
      hs: this.$store.state.hs,
      bridge: this.$store.state.bridge,
      id: this.$route.params.id,
      title: decodeURIComponent(this.$route.params.name),
      groupDatas: {
        dataArr: [
          {
            maxLine: 4,
            dynamic: true,
            title: "",
            data: [],
            focObj: []
          }
        ],
        focArr: [[]]
      }
    };
  },
  methods: {
    scroll(pos) {
      this.scrollY = pos.y;
      // console.log(pos);
    },
    scrollTo(targetIndex) {
      // console.log("targetIndex", targetIndex);
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    setBackObj(backObj) {
      this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
    },
    getData1() {
      let schoolId = Object.keys(this.$store.state.user).length > 0 ? this.$store.state.user.clazz.grade.school.id : this.$store.state.school.id
      this.hs.ajax.get(
        "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=" +
          this.id,
        data => {
          data = JSON.parse(data);
          // console.log(data);
          if (data.head.code === 1) {
            // let title = data.body.name;
            // this.groupDatas.dataArr[0].title = "";
            this.hs.ajax.get(
              "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=" +
                data.body.id +
                "&schoolId=" + schoolId,
              data => {
                data = JSON.parse(data);
                //console.log(data);
                if (data.head.code === 1 && data.body.length > 0) {
                  // this.groupDatas.dataArr[0].title = title;
                  this.groupDatas.dataArr[0].data = data.body;
                }
              },
              0,
              function(msg) {},
              3000
            );
          }
        },
        0,
        function(msg) {},
        3000
      );
    },
    goPlay(folderCode, contentId, contentType) {
      // this.$store.commit("setAppShow", false);
      let url =
        "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay?folderCode=" +
        folderCode +
        "&contentId=" +
        contentId +
        "&contentType=" +
        contentType;
      this.hs.ajax.get(
        url,
        _responseText => {
          let res = JSON.parse(_responseText);
          //console.log(res);
          if (res.result == "0" || res.result == 0) {
            if (res.authResult == 0) {
              let url =
                "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
                folderCode +
                "&contentId=" +
                contentId +
                "&contentType=" +
                contentType +
                "&playUrlType=rtsp";
              this.hs.ajax.get(
                url,
                _responseText => {
                  let res = JSON.parse(_responseText);
                  this.bridge.gotoApplication2play(res.playUrl);
                },
                0,
                3000
              );
            } else {
              this.bridge.gotoApplication2order({
                ppvId: res.ppvId,
                columnAlias: this.folderCode
              });
            }
          }
        },
        0,
        3000
      );
    }
  },

  created() {
    this.getData1();
  },
  mounted() {
    this.hs.addSelect(this.groups, (group, objid, objindex) => {
      // console.log(this.groupDatas.dataArr[group]);
      if (this.groupDatas.dataArr[group].data[objindex].id) {
        this.hs.ajax.get(
          "http://" +
            this.$store.state.domain +
            "/SMSCH-STB/material/find?materialId=" +
            this.groupDatas.dataArr[group].data[objindex].id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1 && data.body.more) {
              this.goPlay(
                data.body.more.folderCode,
                data.body.more.contentId,
                data.body.more.contentType
              );
            }
          },
          0,
          function(msg) {},
          3000
        );
      }
    });

    this.hs.initFocus("0-0");

    //  查看是否有记忆焦点
    if (this.hs.cookie.get(this.backObjName)) {
      let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
      let focArr = backObj.backFocArr;
      this.hs.cookie.delOne(this.backObjName);
      //console.log(JSON.stringify(focArr) + "**************");
      this.hs.initFocus(focArr[0], true);
    }

    this.bridge.whenKeyBack = () => {
      // 当页面显示的时候就返回首页, 隐藏的时候, 就显示页面
      if (this.$store.state.appShow) {
        window.history.go(-1);
      } else {
        this.$store.commit("setAppShow", true);
      }
    };
  }
};
</script>

<style scoped lang="less">
.main {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .bg1 {
    position: absolute;
    top: 0;
    z-index: -1;
  }
  .title {
    position: relative;
    text-align: right;
    top: 77px;
    left: 1480px;
    font-family: MicrosoftYaHei;
    width: 321px;
    height: 60px;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: 0px;
    color: #a8e7ff;
  }
  .main-container {
    position: absolute;
    top: 160px;
    margin-left: 72px;
    height: 920px;
    width: 1800px;
    display: flex;
    .multi-container {
      padding-left: 48px;
      padding-top: 48px;
    }
  }
}
</style>
